<template>
	<el-form ref="ruleFormRef" label-position="top"  :model="formInline" :rules="formRules" label-width="auto" v-loading="isLoading">
		<el-row :gutter="30">

			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.projectName' prop='id'>
                   {{ isNullOrEmpty(projectName) }}
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityName' prop='id'>
					{{ isNullOrEmpty(unityName) }}
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.supUnityId' prop='supUnityId'>
					<superviseUnitySelect
					v-model='formInline.supUnityId' clearable :placeholder='prompt?.supUnityId'
					:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'supUnityId')">

					</superviseUnitySelect>
					<!-- <el-input v-model='formInline.supUnityId' clearable :placeholder='prompt?.supUnityId' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.roleNames' prop='roleNames'>
					<grantPermissions 
					multiple
					v-model='formInline.roleNames' clearable :placeholder='prompt?.roleNames'
					:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'roleNames')">
					</grantPermissions>
				</el-form-item>
			</re-col>
			 </el-row>
	</el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import  superviseUnitySelect from "@/components/select/superviseUnitySelect/superviseUnitySelect.vue"
import type { infoType } from '@/api/manage/projectManagementes/supervise/intex';
import  { getrole } from '@/api/manage/projectManagementes/supervise/intex';
import grantPermissions from "@/components/select/grantPermissions/grantPermissions.vue";
import { formValidateField } from '@/utils/functions'
onMounted(()=>{
	setTimeout(()=>{
		getAllrole()
	},1000)
	
})
const roleList = ref([])
type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	projectName:string,
	unityName:string,
	projectId:string,
	unityId:any
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
	projectName:'',
	unityName:'',
	projectId:''
});
console.log("props",props);

const formRules = reactive(<FormRules>{

});
const ruleFormRef = ref();

//获取授权角色
const getAllrole = ()=>{
	getrole({
		projectId:props.projectId
	}).then(res=>{
		roleList.value = res.result
console.log("授权角色",roleList.value);

	})
}

function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
